$(function() {

	let layer = layui.layer
	let form = layui.form

	function getCateList() {
		$.ajax({
			url: '/my/article/cates',
			type: 'get',
			data: {},
			success: function(res) {
				var html = template('tpl', res)
				//	console.log(res, html, 8);
				$('tbody').html(html)
			},
		})
	}
	getCateList()

	/* z展示添加数据 弹出层 */
	var formStr = `
		<form class="layui-form login" id='form-add'>
			<div class="layui-form-item">
			
				<label class="layui-form-label">分类名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required|name" placeholder="请输入用户昵称"
						autocomplete="off" class="layui-input">
				</div>
			</div>

		  <div class="layui-form-item">
				<label class="layui-form-label">分类别名</label>
				<div class="layui-input-block">
					<input type="text" name="alias" required lay-verify="required|name" placeholder="请输入用户昵称"
						autocomplete="off" class="layui-input">
				</div>
			</div>


			<div class="layui-form-item">
						<div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加 </button><button
								type="reset" class="layui-btn layui-btn-primary">重置</button> </div>
					</div>

		</form>
	
	`

	/* 编辑模板 */
	var formStr2 = `
		<form class="layui-form login" id='form-edit'>
			<input   type="hidden" value=""  name="Id">
			<div class="layui-form-item">
				<label class="layui-form-label">分类名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required" placeholder="请输入用户昵称"
						autocomplete="off" class="layui-input">
				</div>
			</div>

		  <div class="layui-form-item">
				<label class="layui-form-label">分类别名</label>
				<div class="layui-input-block">
					<input type="text" name="alias" required lay-verify="required" placeholder="请输入用户昵称"
						autocomplete="off" class="layui-input">
				</div>
			</div>


			<div class="layui-form-item">
						<div class="layui-input-block"> <button id='editForm' class="layui-btn" lay-submit lay-filter="formDemo">确认添加 </button><button
								type="reset" class="layui-btn layui-btn-primary">重置</button> </div>
					</div>

		</form>
	
	`

	var indexAdd = null;
	$('.add').on('click', function() {
		indexAdd = layer.open({
			type: 1, //  添加这个属性校验不满足 对话框也不关闭
			title: '添加文章分类',
			skin: 'demo-class',
			btn: [], //可以无限个按钮
			content: formStr //注意，如果str是object，那么需要字符拼接。
		});
	})



	/* 表单提交 
	+ 3-校验
	*/


	/* 需要解决的问题
	+ 点击确认按钮 不满足校验规则 就不关闭对话框
	+ 满足校验  发送请求
	 */

	form.verify({
		name: [/^[\S]{5,10}$/, '昵称必须6到12位，且不能出现空格']
	})


	/* 新增分类 */
	$('body').on('submit', '#form-add', function(e) {

		e.preventDefault();

		$.ajax({
			url: '/my/article/addcates',
			type: 'post',
			data: $('#form-add').serialize(),
			success: function(res) {
				//  成功后：页面上立马展示刚刚添加的数据   +   关闭对话框
				getCateList()
				layer.close(indexAdd) //  关闭对话框
			},
		})

	})


	/* 删除 
	+  自定义data-id
	+ 事件委托绑定点击事件
		+ 获取id
		+ 显示对话框
		+ 在点击确认按钮的回调函数中 发送删除分类的请求
				+ 成功后：
					+ 关闭对话框
					+ 刷新页面
	*/

	$('body').on('click', '.del', function() {
		let id = $(this).data('id')
		//alert(id)
		layer.confirm('is not?', {
			icon: 3,
			title: '提示'
		}, function(index) {
			// alert(index)
			//  这里是点击确认按钮的回调  
			$.ajax({
				url: '/my/article/deletecate/' + id,
				type: 'get',
				data: {},
				success: function(res) {
					getCateList() //  刷新页面

					layer.close(index); // 关闭对话框
				},
			})
		});
	})


	/* 编辑 */
	/* 
	点击按钮
		+ 获取id
		+ 根据id发送请求获取对应的分类数据
		+ 将根据id获取的数据展示到表单中
			+ 显示表单  显示表单对话框
			+ 将值显示到表单中
			+ 将id值存到隐藏域中
		+ 点击表单中的按钮
			+ 发送请求  编辑的请求
			+ 成功后  关闭对话框+ 刷新
	
	 */
	let indexEdit = null
	$('body').on('click', '.edit', function() {
		let id = $(this).data('id')
		//alert(id)



		$.ajax({
			url: '/my/article/cates/' + id,
			type: 'get',
			data: {},
			success: function(res) {
				//  显示表单对话框
				indexEdit = layer.open({
					type: 1, //  添加这个属性校验不满足 对话框也不关闭
					title: '编辑文章分类',
					skin: 'demo-class',
					btn: [], //可以无限个按钮
					content: formStr2 //注意，如果str是object，那么需要字符拼接。
				});
				$('body').find('input[name=Id]').val(id)

				/* 将值显示到表单中 */
				$('input[name=name]').val(res.data.name)
				$('input[name=alias]').val(res.data.alias)


			},
		})

	})

	/* 点击对话框中的确认按钮 ===编辑*/
	$('body').on('submit', '#form-edit', function(e) {
		e.preventDefault();

		$.ajax({
			url: '/my/article/updatecate',
			type: 'post',
			data: $('#form-edit').serialize(),
			success: function(res) {
				getCateList()
				layer.close(indexEdit) //  关闭对话框
			},
		})
	})
})
